<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="./axios.min.js"></script>
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>

    <form id="uploadForm" enctype="multipart/form-data">
      <label for="imageInput">Choose an image:</label>
      <input type="file" id="imageInput" name="image" accept="image/*" required>
      <br><br>
      <button type="button" onclick="uploadImage()">Upload</button>
    </form>
    
    <div id="response"></div>

    <script>
      function uploadImage() {
          var formData = new FormData();
          var imageInput = document.getElementById('imageInput');
          formData.append('image', imageInput.files[0]);

          axios.post('/image-upload', formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          })
            .then(function (response) {
              console.log("🚀 ~ response:", response)
              
              // 假设服务器返回一个 JSON 对象，其中包含上传结果
              // var responseDiv = document.getElementById('response');
              // if (response.data.success) {
              //   responseDiv.innerHTML = '<p>Upload successful!</p>';
              //   // 根据需要处理上传后的图片 URL 或其他信息
              // } else {
              //   responseDiv.innerHTML = '<p>Upload failed: ' + response.data.message + '</p>';
              // }
            })
            .catch(function (error) {
              var responseDiv = document.getElementById('response');
              responseDiv.innerHTML = '<p>Upload failed due to an error: ' + error.message + '</p>';
            });
        }
    </script>
  </body>
</html>
